import {NavBar, Toast} from "antd-mobile";
import '../css/Coupon.css'
import {useEffect, useRef, useState} from "react";
import axios from "axios";
import moment from "moment";
import {useNavigate} from "react-router-dom";


export default function Coupon() {
    const navigate = useNavigate()
    const data = useRef(null)
    const [status, setStatus] = useState(false)
    const [flag, setFlag] = useState(0)
    const [couponList, setCouponList] = useState([])
    const [userCouponList, setUserCouponList] = useState([])
    let [obj, setObj] = useState({status:false,CouponId:null,code:null})
    const userId = localStorage.getItem('userID')
    //获取优惠券ID
    const [couponId, setCouponId] = useState(null)
    const [num,setNum] = useState(0)
    const back = () =>{
   navigate(-1)
        }


    const setCoupon = async(id) => {
        let {data:{CouponStatus,CouponId,code}} = await axios.post('/fxs/claim-coupon',{
            userId,
            couponId: id,
            status: true
        })
        if(code === 200){
            Toast.show({
                content: '领取成功',
            })

            // setStatus( CouponStatus)
            setCouponId(CouponId)
        }

    }
    const formatDate = (date) => {
        return moment(date).format('YYYY.MM.DD')
    }
    const getCouponList = async() => {

        let {data:{list,code,list1}} = await axios.get('/fxs/coupon',
        {params:{couponId: couponId,num:num}
        })
        if(code === 200){

            setCouponList(list)






        }
    }
    const btn=()=>{
        console.log(couponId)


    }

    useEffect(() => {
        getCouponList()


    },[couponId])
    useEffect(() => {
        // getUserCoupon()
        // btn()
    },[couponId])
    return (
        <>
            <div className={'coupon-header'}>
                <NavBar onBack={back} style={{backgroundColor: '#e8e7e3', height: '5rem'}}>领券中心</NavBar>
            </div>
            <div className={'coupon-body'}>
                {couponList.map((item, index) => {
                    return (
                        <div className={'coupon-item'} ref={data} key={item._id}>
                            <div className={'coupon-item-left'}>
                                <div className={'coupon-item-title'}>
                                    <span>{item.title}</span>
                                </div>
                                <div className={'coupon-item-time'}>
                                    <span>有效期:  </span>  <span>{formatDate(item.startTime)}</span>-<span>{ formatDate(item.endTime)}</span>
                                </div>
                            </div>
                             <div className={'coupon-item-right'}

                                  onTouchStart={()=>{
                                setCoupon(item._id)
setNum(num+1)
                                  } } style={{backgroundColor: item.num===0
                                     ?  '#bea994':'#989898' }}
                            >
                                <div className={'coupon-item-price'}><span>¥</span><span>{item.price}</span></div>
                                <div className={'coupon-item-icon'}>
                                    <span className={'iconfont icon-hongbao-m'}></span>
                                </div>
                                <div className={'coupon-item-btn'}>{


                                 item.num===0?  '立即领取':'已领取' }</div>
                            </div>
                        </div>
                    )
                })}

            </div>

        </>
    )
}
